<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <button id="create">创建</button>
    <input type="number" onchange="setWidth()" id="inputWidth">
    <input type="number" onchange="setHeight()" id="inputHeight">
    <input type="number" onchange="setHeight()" id="borderWidth">

    <!-- dom -->
    <div class="target" id="target"></div>
    <script>
        /* 获取DOM */
        const create = document.getElementById('create')
        const target = document.getElementById('target')
        const inputWidth = document.getElementById('inputWidth')
        const inputHeight = document.getElementById('inputHeight')

        let box = {
            /* 列举出需要渲染出来的属性 */
            w: 100,
            h: 100,
            bgcolor: 'red',
            padding: {
                left: '',
                top: ""
            },
            border: {
                width: 1,
                color: 'green',
                style: "solid",
            },
        }
        /* 更新数据 对象|数组 */

        create.onclick = () => {
            /*    <div class="box"></div> */
            render()
        }
        const setWidth = () => {
            box.w = Number(inputWidth.value)
            render()
        }
        const setHeight = () => {
            box.h = Number(inputHeight.value)
            render()
        }
        /* 渲染dom */
        const render = () => {
            target.innerHTML += `<div class="box" style="width:${box.w}px;height:${box.h}px;background:${box.bgcolor}"></div>`
        }
    </script>
</body>

</html>